<template>
  <div>
     <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
    <Row :gutter="20">
      <Col span="18">
        <chart-y-bar
          :value="chart_bar_data9"
          style="height: 650px"
          :text="Portraytext"
          :barWidth="hxbarWidth"
          :rotate="HxRotate"
          :loading="loading"
        ></chart-y-bar>
      </Col>
      <Col span="5">
        <Form label-position="top" class="inputs">
          <Divider orientation="left">图表名称</Divider>
          <div style="margin-bottom: 40px">
            <FormItem>
              <Input v-model="Portraytext" placeholder="请输入图表名称" />
            </FormItem>
          </div>
          <div style="margin-bottom: 40px">
            <Divider orientation="left">机构名称</Divider>
            <draggable v-model="chart_bar_data9">
              <transition-group>
                <FormItem
                  v-for="(item, index) in chart_bar_data9"
                  :key="index"
                >
                  <Input v-model="item.name"></Input>
                </FormItem>
              </transition-group>
            </draggable>
            <Divider orientation="left">机构名角度(0-360)</Divider>
            <FormItem>
              <Input
                v-model="HxRotate"
                placeholder="请输入机构名角度(0-360)"
              />
            </FormItem>
            <Divider orientation="left">柱子宽度（0-100）</Divider>
            <FormItem>
              <Input
                v-model="hxbarWidth"
                placeholder="请输入机构名角度(0-360)"
              />
            </FormItem>
          </div>
        </Form>
      </Col>
    </Row>
  </div>
</template>

<script>
import ChartYBar from "@/components/charts/ybar.vue";
import HelloWorld from '@/components/HelloWorld.vue'
import draggable from 'vuedraggable'
export default {
  name: "ybar",
  components: {
    HelloWorld,
    ChartYBar,
    draggable
  },
  data() {
    return {
      loading: false,
      hxbarWidth: '30',
      Portraytext: 'bar图表名称',
      HxRotate: '45',
      chart_bar_data9: [
        // 数字画像分
        { name: "大学1", value: "2.21" },
        { name: "大学2", value: "8.21" },
        { name: "大学3", value: "12.21" },
      ],
    };
  },
  methods: {},
  mounted() {},
};
</script>
